<template>
	<view class="w-screen h-screen flex flex-col" :style="themeColor()">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{ 'height': headerHeight }">
			<top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" />
		</view>
		<!-- #endif -->
		<view class="mx-[60rpx]">
			<view class="pt-[140rpx] text-[44rpx] font-500 text-[#333]">重置密码</view>
			<view class="text-[26rpx] leading-[39rpx] text-[var(--text-color-light6)] mt-[16rpx] mb-[80rpx]">请输入手机号重置密码</view>
			<u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef">
				<view
					class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[var(--goods-rounded-mid)] box-border bg-[#F6F6F6]">
					<u-form-item label="" prop="mobile" :border-bottom="false">
						<u-input v-model="formData.mobile" type="number" maxlength="11" border="none"
							:placeholder="t('mobilePlaceholder')" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx"
							placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]" />
					</u-form-item>
				</view>
				<view
					class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[var(--goods-rounded-mid)] box-border bg-[#F6F6F6] mt-[40rpx]">
					<u-form-item label="" prop="code" :border-bottom="false">
						<u-input v-model="formData.mobile_code" type="number" maxlength="6" border="none"
							:placeholder="t('codePlaceholder')" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx"
							placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
							<template #suffix>
								<sms-code :mobile="formData.mobile" type="find_pass" v-model="formData.mobile_key"></sms-code>
							</template>
						</u-input>
					</u-form-item>
				</view>
				<view
					class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[var(--goods-rounded-mid)] box-border bg-[#F6F6F6] mt-[40rpx]">
					<u-form-item label="" prop="password" :border-bottom="false">
						<u-input v-model="formData.password" border="none" :password="isPassword" maxlength="40"
							:placeholder="t('passwordPlaceholder')" class="!bg-transparent" :disabled="real_name_input"
							fontSize="26rpx" placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
							<template #suffix>
								<view class="" @click="changePassword" v-if="formData.password">
									<u-icon :name="isPassword ? 'eye-off' : 'eye-fill'" color="#b9b9b9" size="20"></u-icon>
								</view>
							</template>
						</u-input>
					</u-form-item>
				</view>
				<view
					class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[var(--goods-rounded-mid)] box-border bg-[#F6F6F6] mt-[40rpx]">
					<u-form-item label="" prop="confirm_password" :border-bottom="false">
						<u-input v-model="formData.confirm_password" border="none" :password="isConfirmPassword" maxlength="40"
							:placeholder="t('confirmPasswordPlaceholder')" class="!bg-transparent" :disabled="real_name_input"
							fontSize="26rpx" placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
							<template #suffix>
								<view class="" @click="changeConfirmPassword" v-if="formData.confirm_password">
									<u-icon :name="isConfirmPassword ? 'eye-off' : 'eye-fill'" color="#b9b9b9" size="20"></u-icon>
								</view>
							</template>
						</u-input>
					</u-form-item>
				</view>
			</u-form>
			<view class="mt-[160rpx]">
				<button
					class="w-full h-[80rpx] !bg-[var(--primary-color)] text-[26rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff]"
					@click="handleConfirm">{{ t('confirm') }}</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { t } from '@/locale'
import { resetPassword } from '@/app/api/system'
import { redirect, pxToRpx } from '@/utils/common'
import { topTabar } from '@/utils/topTabbar'

let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({ title: '', topStatusBar: { bgColor: '#fff', textColor: '#333' } })
/********* 自定义头部 - end ***********/
const headerHeight = computed(() => {
	return Object.keys(menuButtonInfo).length ? pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 'rpx' : 'auto'
})
const formData = reactive({
	mobile: '',
	mobile_code: '',
	mobile_key: '',
	password: '',
	confirm_password: ''
})

const real_name_input = ref(true);
onMounted(() => {
	// 防止浏览器自动填充
	setTimeout(() => {
		real_name_input.value = false;
	}, 800)
});

const loading = ref(false)
const formRef: any = ref(null)
const isPassword = ref(true)
const isConfirmPassword = ref(true)
const changePassword = () => {
	isPassword.value = !isPassword.value
}

const changeConfirmPassword = () => {
	isConfirmPassword.value = !isConfirmPassword.value
}

const rules = {
	'password': {
		type: 'string',
		required: true,
		message: t('passwordPlaceholder'),
		trigger: ['blur', 'change']
	},
	'confirm_password': [
		{
			type: 'string',
			required: true,
			message: t('confirmPasswordPlaceholder'),
			trigger: ['blur', 'change']
		},
		{
			validator(rule: any, value: any) {
				return value == formData.password
			},
			message: t('confirmPasswordError'),
			trigger: ['change', 'blur'],
		}
	],
	'mobile': [
		{
			type: 'string',
			required: true,
			message: t('mobilePlaceholder'),
			trigger: ['blur', 'change'],
		},
		{
			validator(rule: any, value: any) {
				return uni.$u.test.mobile(value)
			},
			message: t('mobileError'),
			trigger: ['change', 'blur'],
		}
	],
	'mobile_code': {
		type: 'string',
		required: true,
		message: t('codePlaceholder'),
		trigger: ['blur', 'change']
	}
}

const handleConfirm = () => {
	formRef.value.validate().then(() => {
		if (loading.value) return
		loading.value = true
		let data = {
			code: formData.mobile_code,
			mobile: formData.mobile,
			password: formData.password
		}
		resetPassword(data).then((res: any) => {
			redirect({ url: '/app/pages/auth/login', mode: 'redirectTo' })
		}).catch(() => {
			loading.value = false
		})
	})
}
</script>

<style lang="scss" scoped>
:deep(.u-input) {
	background-color: transparent !important;
}

:deep(.u-checkbox) {
	margin: 0 !important;
}

:deep(.u-form-item) {
	flex: 1;

	.u-line {
		display: none;
	}
}
</style>